<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Zune-keyed</title>
    <link href="/css/currentStyle.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container" id="main">
      <div class="jumbotron">
        <div class="row">
          <div class="col-md-6">
            <h1>Zune-keyed</h1>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="run" data-click="bench: 'run'">Create 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="runlots" data-click="bench: 'runLots'">Create 10,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="add" data-click="bench: 'add'">Append 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="update" data-click="bench: 'update'">Update every 10th row</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="clear" data-click="bench: 'clear'">Clear</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="swaprows" data-click="bench: 'swapRows'">Swap Rows</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <table class="table table-hover table-striped test-data">
        <tbody data-tpl="bench"></tbody>
      </table>
      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
      <template data-name="bench">
        <tr>
          <td class="col-md-1">${id}</td>
          <td class="col-md-4"><a data-click="bench: 'select'">${label}</a></td>
          <td class="col-md-1"><a data-click="bench: 'remove'"><span class="glyphicon glyphicon-remove" aria-hidden="true" /></a></td>
          <td class="col-md-6"></td>
        </tr>
     </template>
    </div>
    <script type="module">
      (await import('./src/core/main.js')).default();
    </script>
  </body>
</html>
